export default class MyRouter {
  static installed = false
  static Vue = null
  static install (Vue) {
    // 判断插件是否已安装
    if (MyRouter.installed) return
    MyRouter.installed = true

    // 保存 Vue 的引用
    MyRouter.Vue = Vue

    // 把 router 混入到所有 Vue 实例中
    Vue.mixin({
      beforeCreate () {
        // this 指向 Vue 实例
        // main.js 的 Vue 实例有 .$options.router, 而组件没有
        const { router } = this.$options
        if (router) {
          Vue.prototype.$router = router.init()
        }
      }
    })
  }

  constructor (options) {
    this.options = options
    this.routeMap = {}
    // 响应式对象
    this.data = MyRouter.Vue.observable({
      current: ''
    })
  }

  init () {
    this.initRouteMap()
    this.initComponents()
    this.initEvent()
    return this
  }

  initRouteMap () {
    this.options.routes.forEach(({ path, component }) => {
      this.routeMap[path] = component
    })
    this.getCurrent() // 取得初始值
  }

  initComponents () {
    MyRouter.Vue.component('router-link', {
      props: { to: String },
      // 生产版本的 Vue 不带运行时编译器, 不能使用模板串,
      // 可以用 render 函数取代
      // template: '<a :href="to"><slot></slot></a>'
      render (h) {
        return h('a', {
          attrs: {
            href: '/#' + this.to
          }
        }, [this.$slots.default])
      }
    })

    MyRouter.Vue.component('router-view', {
      render: (h) => {
        const component = this.routeMap[this.data.current]
        return h(component)
      }
    })
  }

  getCurrent () {
    const hash = window.location.hash
    this.data.current = hash ? hash.slice(1) : '/'
  }

  initEvent () {
    window.addEventListener('hashchange', this.getCurrent.bind(this))
  }
}
